import React, { useMemo } from 'react';
import { Col, Form, Row } from 'antd';

import InfoFormItem from '@/components/InfoFormItem';
import CardSecondLevel from '@/components/CardSecondLevel';
import { INFO_FORM_LAYOUT } from '@/utils/const';
import DataCard from '@/components/DataCard';
import getFlowUnit from '@antelopecloud/utils/lib/unit/getFlowByUnit';

const BasicPlatform = (props: { loading: boolean; data: any }) => {
  const { loading, data } = props;
  const {
    uplinks,
    videos,
    pictures,
    gpu_perf_max,
    gpu_perf,
    today_pictures,
    today_videos,
    used_storage = 0,
    total_storage = 0,
    up_platforms,
    up_platform_devices,
    up_platform_access,
  } = data;

  const used_storage_unix = useMemo(() => {
    return Number(
      getFlowUnit(
        'PB',
        used_storage,
        {
          scale: 1024,
          showUnit: false,
          precision: 4,
        },
        false,
      ),
    );
  }, [used_storage]);
  const total_storage_unix = useMemo(() => {
    return Number(
      getFlowUnit(
        'PB',
        total_storage,
        {
          scale: 1024,
          showUnit: false,
          precision: 4,
        },
        false,
      ),
    );
  }, [total_storage]);

  const dataTotals = [
    {
      label: '链路总数',
      value: `${uplinks} 个`,
    },
    {
      label: '视频路数',
      value: `${videos} 个`,
    },
    {
      label: '图片数量',
      value: `${pictures} 个`,
    },
  ];

  const dataDetails = [
    {
      label: 'GPU已用/性能上限',
      value: `${gpu_perf}/${gpu_perf_max} qps`,
    },
    {
      label: '今日处理图片数',
      value: `${today_pictures} 张`,
    },
    {
      label: '今日处理视频数',
      value: `${today_videos} 个`,
    },
    {
      label: '存储已用/总计',
      value: `${used_storage_unix}/${total_storage_unix} PB`,
    },
    {
      label: '共享上级平台数',
      value: `${up_platforms} 个`,
    },
    {
      label: '共享视频路数',
      value: `${up_platform_devices} 路`,
    },
    {
      label: '上级平台调阅次数',
      value: `${up_platform_access} 次`,
    },
  ];

  return (
    <>
      <DataCard title="忻州市级平台" loading={loading}>
        <Row gutter={64}>
          <Col span={8}>
            <CardSecondLevel title="云→云" />
            <Form {...INFO_FORM_LAYOUT}>
              {dataTotals.map(item => (
                <InfoFormItem label={item.label} key={item.label}>
                  {item.value}
                </InfoFormItem>
              ))}
            </Form>
          </Col>
          <Col span={8}>
            <CardSecondLevel title="忻州市级云" />
            <Form {...INFO_FORM_LAYOUT}>
              {dataDetails.map(item => (
                <InfoFormItem label={item.label} key={item.label}>
                  {item.value}
                </InfoFormItem>
              ))}
            </Form>
          </Col>
        </Row>
      </DataCard>
    </>
  );
};

export default BasicPlatform;
